﻿@{
    Layout = null;
    
}

<table id="jqgDataKH"></table>
<div id="pagingKH" style="width:100%!important"></div>

<script type="text/javascript">
    $(document).ready(function () {
        loadGridKH();
        $("#gs_Action").hide();
    });

    function loadGridKH() {
        $('#jqgDataKH').setGridParam({ datatype: "json" }).trigger('reloadGrid');
        $("#jqgDataKH").jqGrid({
            url: '@Url.Action("IndexPopUp", "KhachHang")',
            hoverrows: true,
            datatype: 'json',
            mtype: 'POST',

            colNames: ['ID','Action', 'Mã khách hàng', 'Tên khách hàng', 'Địa chỉ', 'SĐT'],
            colModel: [
              { name: 'ID', index: 'ID', align: 'center', hidden: true },
               { name: 'Action', index: 'Action', align: 'center', editable: true, formatter: ActionChon, width: '30px' },
                { name: 'MaKH', index: 'MaKH', align: 'left' },
                { name: 'TenKH', index: 'TenKH', align: 'left' },
                { name: 'DiaChiKH', index: 'DiaChiKH', align: 'left' },
                { name: 'SDT', index: 'SDT', align: 'right' },

            ],
            pager: '#pagingKH',
            jsonReader: { repeatitems: false },
            sortname: 'MaKH',
            viewrecords: true,
            sortorder: 'desc',
            //scroll: true,
            //autowidth: true,
            autowidth: true,
            height: 'auto',
            autoencode: true,
            rowNum: 20,
            rowList: [5, 10, 20]
        });
        $("#jqgDataKH").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", enableClear: false, ignoreCase: true });

        function ActionChon(cellvalue, options, rowObject) {
            var rowid = rowObject["ID"];
            return "<button class='btn btn-primary' value='Chọn' onclick='SelectKH(" + rowid + ")'><span class='glyphicon glyphicon-ok'></span></button>";
            
        };

    }
</script>

